<template>
  <div>
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="firstPage">
        <Home/>
      
      </mt-tab-container-item>
      <mt-tab-container-item id="favorites">
        22
      </mt-tab-container-item>
      <mt-tab-container-item id="mine">
        33
      </mt-tab-container-item>
    </mt-tab-container>
    
    <mt-tabbar v-model="selected">
      <mt-tab-item id="firstPage">
        <img slot="icon" src="../assets/100x100.png">
        首页
      </mt-tab-item>
      <mt-tab-item id="favorites">
        <img slot="icon" src="../assets/100x100.png">
        收藏
      </mt-tab-item>
      <mt-tab-item id="mine">
        <img slot="icon" src="../assets/100x100.png">
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import Home from './Home.vue'

export default {
  name: 'HelloWorld',
  data () {
    return {
      selected: ''
    }
  },
  components:{
    Home
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
